<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <div id="root">
        

    </div>


    <script type="text/javascript">

        const vm = new Vue({
            el: "#root",
            data: {
                
            }
        })

        // 浏览器控制台测试一下，obj2的值复制到了obj，修改obj2，obj的值也会改变，直接获取obj2的值，是obj的值
        // 场景：可以适用于捕获值发生变化的时候做处理业务

        let obj = { x: 100 }
        let obj2 = { x: 200 }

        Object.defineProperty(obj2, 'x', {
            get: function () {
                return obj.x
            },
            set: function (n) {
                obj.x = n
            }
        })


    </script>
</body>

</html>